<template>
    <div class="setClassify">
        <div class="setClassify__del" @click="remark">批量备注</div>
        <el-dropdown @command="handleCommand" trigger="click">
            <div class="setClassify__drop">...</div>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                    v-for="item in dropdownList"
                    :key="item.command"
                    :disabled="item.disabled"
                    :command="item.command"
                >{{item.text}}</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class DrapDown extends Vue {
  dropdownList = [
    {
      text: "批量发货",
      command: "1",
      disabled: false,
    },
  ];

  /**
   * 点击的下拉项
   */
  handleCommand(val) {
    this.$emit("command", val);
  }

  /**
   * 点击批量备注
   */
  remark() {
    this.$emit("remark");
  }
}
</script>
    
<style lang="scss" scoped>
@include b(setClassify) {
  display: flex;
  @include e(del) {
    width: 80px;
    height: 30px;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: pointer;
  }
  @include e(drop) {
    width: 40px;
    height: 30px;
    border: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
  }
}
</style>
